<!DOCTYPE html>
<html>

{include file='public/header'}

<body>
    <div class="x-nav">
        <span class="layui-breadcrumb">
            <a href="javascript:void(0)">首页</a>
            <a href="javascript:void(0)">投放管理</a>
            <a><cite>投放总览统计</cite></a>
        </span>
        <a class="layui-btn layui-btn-small" id="reload" title="刷新">
            <i class="layui-icon" style="line-height:30px"><i class="iconfont">&#xe6aa;</i></i>
        </a>
    </div>
    <div class="x-body">
        <fieldset class="layui-elem-field">
            <legend>数据统计</legend>
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-body">
                        <div class="layui-carousel x-admin-carousel x-admin-backlog" style="width: 100%">
                            <ul class="layui-row layui-col-space10 layui-this">
                                <li class="layui-col-xs6 layui-col-sm3 layui-col-md2">
                                    <a href="javascript:;" class="x-admin-backlog-body">
                                        <h3>累计充值</h3>
                                        <p><cite id="total_recharge"></cite></p>
                                    </a>
                                </li>
                                <li class="layui-col-xs6 layui-col-sm3 layui-col-md2">
                                    <a href="javascript:;" class="x-admin-backlog-body">
                                        <h3>当月充值</h3>
                                        <p><cite id="this_month_recharge"></cite></p>
                                    </a>
                                </li>
                                <li class="layui-col-xs6 layui-col-sm3 layui-col-md2">
                                    <a href="javascript:;" class="x-admin-backlog-body">
                                        <h3>上月充值</h3>
                                        <p><cite id="last_month_recharge"></cite></p>
                                    </a>
                                </li>
                                <li class="layui-col-xs6 layui-col-sm3 layui-col-md2">
                                    <a href="javascript:;" class="x-admin-backlog-body">
                                        <h3>累计成本</h3>
                                        <p><cite id="total_spend"></cite></p>
                                    </a>
                                </li>
                                <li class="layui-col-xs6 layui-col-sm3 layui-col-md2">
                                    <a href="javascript:;" class="x-admin-backlog-body">
                                        <h3>总关注用户</h3>
                                        <p><cite id="total_user"></cite></p>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </fieldset>
        <form class="layui-form layui-row" style="margin-top:15px;margin-bottom: 10px;">
            <div class="layui-inline" id="dataTime">
                <label class="layui-form-label w-auto">日期：</label>
                <div class="layui-inline" id="time" style="display: flex;align-items: center;">
                    <div class="layui-input-inline" style="margin-right:10px">
                        <input type="text" class="layui-input" name="start_date" id="start_time" autocomplete="off" placeholder="开始时间">
                    </div>
                    <div class="layui-form-mid">-</div>
                    <div class="layui-input-inline">
                        <input type="text" class="layui-input" name="end_date" id="end_time" autocomplete="off" placeholder="结束日期">
                    </div>
                </div>
            </div>

            <div class="layui-inline">
                <label class="layui-form-label w-auto">投放平台：</label>
                <div id="pMedia" style="width:100%;flex:1"></div>
            </div>

            <div class="layui-inline" style="margin-left:10px">
                <button class="layui-btn" lay-submit lay-filter="searchList">搜索</button>
                <button type="reset" id="resetList" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </form>
        <table id="launchDataList" lay-filter="launchDataList"></table>
    </div>
    <script type="text/html" id="tbBar">
        <a class="layui-btn layui-btn-xs" lay-event="look">查看</a>
    </script>
    <script>
        Ajax('/cps/launch/overviewStatistics', {}).then(data => {
            var keys = Object.keys(data.data);
            for (var i = 0; i < keys.length; i++) {
                $(`#${keys[i]}`).html(data.data[keys[i]])
            }
        });
        let params = {
            elem: '#launchDataList'
            , toolbar: '#toolbar'
            , url: '/cps/launch/launchDataList' //数据接口
            , id: 'launchDataList'
            , limit:15
            , page:true
            , cols: [[ //表头
                {title: '平台', align: 'center', width:92, templet: function (d) {
                        return d.platform == 1 ? '抖音巨量' : d.platform == 2 ? '快手磁力' : d.platform == 3 ? '百度营销' : d.platform == 4 ? '腾讯广告' : ''
                    }
                }
                , { field: 'date', title: '日期', align:'center'}
                , { field: 'total_cost', title: '总消耗<i class="layui-icon iconfont icon-lytishi1" id="total_cost"></i>', align:'center', width:110}
                , { field: 'actual_cost', title: '实际消耗<i class="layui-icon iconfont icon-lytishi1" id="actual_cost"></i>', align:'center', width:110}
                , { field: 'activation_user_num', title: '激活用户', align:'center', width:90}
                , { field: 'register_user_num', title: '注册用户', align:'center', width:90}
                , { field: 'current_recharge', title: '当天充值<i class="layui-icon iconfont icon-lytishi1" id="current_recharge"></i>', align:'center', width:110}
                , { field: 'total_recharge', title: '累计充值<i class="layui-icon iconfont icon-lytishi1" id="total_recharge_tips"></i>', align:'center', width:110}
                , { field: 'current_recharge_discount', title: '当天收益<i class="layui-icon iconfont icon-lytishi1" id="current_recharge_discount"></i>', align: 'center', width: 110}
                , { field: 'total_income', title: '累计收益<i class="layui-icon iconfont icon-lytishi1" id="total_income_tips"></i>', align:'center', width:110}
                , { field: 'current_recharge_profit', title: '利润<i class="layui-icon iconfont icon-lytishi1" id="current_recharge_profit"></i>', align: 'center', width: 110}
                , { field: 'current_recovery', title: '返前ROI<i class="layui-icon iconfont icon-lytishi1" id="current_recovery"></i>', align:'center', width:110}
                , { field: 'actual_recovery', title: '返后ROI<i class="layui-icon iconfont icon-lytishi1" id="actual_recovery"></i>', align:'center', width:110}
                
                
                , { field: 'total_recovery', title: '累计ROI<i class="layui-icon iconfont icon-lytishi1" id="total_recovery"></i>', align:'center', width:110}
                , { field: 'recharge_number', title: '订单数', align:'center', width:90}
                , { field: 'conversion_number', title: '充值人数', align:'center', width:90}
                , { field: 'conversion_cost', title: '转化成本<i class="layui-icon iconfont icon-lytishi1" id="conversion_cost"></i>', align:'center', width:110}
                , { field: 'new_recharge_number', title: '新充笔数<i class="layui-icon iconfont icon-lytishi1" id="new_recharge_number"></i>', align:'center', width:110}
                , { field: 'new_user_number', title: '新充人数<i class="layui-icon iconfont icon-lytishi1" id="new_user_number"></i>', align:'center', width:110}
                , { field: 'fans_cost', title: '粉丝成本<i class="layui-icon iconfont icon-lytishi1" id="fans_cost"></i>', align:'center', width:110}
                , { field: 'conversion_rate', title: '转化率', align:'center', width:90}
                , { field: 'revenue', title: '营收情况<i class="layui-icon iconfont icon-lytishi1" id="revenue"></i>', align:'center', width:110}
                , { field: 'per_capita_contribution', title: '人均充值<i class="layui-icon iconfont icon-lytishi1" id="per_capita_contribution"></i>', align:'center', width:135}
                , { toolbar: '#tbBar', title: '操作', width:80, align:'center' }
            ]]
            ,done:function(){
                tips('#total_cost','#total_cost','扣除返点前的消耗')
                tips('#actual_cost','#actual_cost','扣除返点后的消耗')
                tips('#current_recharge','#current_recharge','当天推广进入的用户在当天的充值')
                tips('#current_recharge_discount','#current_recharge_discount','当天充值*0.9（2023年8月21号前是当天充值*0.95）')
                tips('#current_recharge_profit','#current_recharge_profit','累计收益-实际花费')
                tips('#current_recovery','#current_recovery','当天收益除以总消耗的百分比')
                tips('#actual_recovery','#actual_recovery','当天收益除以实际消耗的百分比')
                tips('#conversion_rate','#conversion_rate','当日推广进入的用户在当天的充值人数 / 激活用户数')
                tips('#total_recharge_tips','#total_recharge_tips','当日激活的用户在当天以及后续的累计充值')
                tips('#total_income_tips','#total_income_tips','当日激活的用户在当天以及后续的累计收益（累计充值*0.9，2023年8月21号前是累计充值*0.95）')
                tips('#total_recovery','#total_recovery','累计收益除以实际花费的百分比')
                tips('#fans_cost','#fans_cost','实际花费 / 激活人数')
                tips('#revenue','#revenue','累计充值 - 实际花费')
                tips('#per_capita_contribution','#per_capita_contribution','充值用户的人均充值')
                tips('#new_user_number','#new_user_number','当日推广进入的用户在当天的充值人数')
                tips('#conversion_cost','#conversion_cost','实际花费 / 新充人数')
                tips('#new_recharge_number','#new_recharge_number','当日推广进入的用户在当天的充值次数')
            }
        }
        tableList(params)

        layui.use('table', function () {
            var table = layui.table;
            table.on('tool(launchDataList)', function (obj) {
                var event = obj.event;
                if (event === 'look') {
                    x_admin_show('查看', `./info.html?date=${obj.data.date}&media_id=${obj.data.platform}`, 1400, 730,null);
                }
            });
        });

        layui.use('laydate', function(){
            var laydate = layui.laydate;
            laydate.render({
                elem: '#dataTime',
                range:['#start_time','#end_time'],
                format: 'yyyy-MM-dd'
            });
        })


        let selectMedia = {
            url: '/cps/launch/getLaunchMedia',
            selected: [],
            tips: '选择平台',
            name: 'platform',
            field_id: 'id',
            field_Name: 'name',
            elem: '#pMedia'
        }
        selectN(selectMedia)
    </script>
</body>

</html>